<template>
  <div class="size">
    <div class="size-item">
      <a-input-number
        class="size-item-input"
        v-model="w.value"
        :disabled="w.disabled"
        @change="$emit('update:width', Number(w.value))"
      />
      <span class="size-item-suffix">W</span>
      <svg-icon
        @click="w.disabled = !w.disabled"
        :type="w.disabled ? 'editor-lock' : 'editor-unlock'"
      ></svg-icon>
    </div>
    <div class="size-item">
      <a-input-number
        class="size-item-input"
        v-model="h.value"
        :disabled="h.disabled"
        @change="$emit('update:height', Number(h.value))"
      />
      <span class="size-item-suffix">H</span>
      <svg-icon
        @click="h.disabled = !h.disabled"
        :type="h.disabled ? 'editor-lock' : 'editor-unlock'"
      ></svg-icon>
    </div>
  </div>
</template>

<script>
import { InputNumber } from 'ant-design-vue'
export default {
  name: 'Size',
  components: {
    [InputNumber.name]: InputNumber,
  },
  props: {
    width: {
      type: Number,
      default: 0,
    },
    height: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    resize() {
      return !this.w.disabled && !this.h.disabled
    },
  },
  watch: {
    width: {
      immediate: true,
      handler(val, oldVal) {
        console.log('width', val)
        this.w = {
          ...this.w,
          value: val,
        }
      },
    },
    height: {
      immediate: true,
      handler(val, oldVal) {
        console.log('height', val)
        this.h = {
          ...this.h,
          value: val,
        }
      },
    },
    resize: {
      immediate: true,
      handler(val) {
        console.log('w && h', val)
        this.$emit('size', val)
      },
    },
  },
  data() {
    return {
      w: {
        value: this.width,
        disabled: false,
      },
      h: {
        value: this.height,
        disabled: false,
      },
    }
  },
}
</script>

<style lang="less" scoped>
@import '../styles/cover.less';
.size {
  .ant_inputnumber_reset();
  display: flex;
  align-items: center;
  justify-content: left;
  &-item {
    flex: 1;
    position: relative;
    &-input {
      width: 70%;
      margin-right: 10px;
    }
    &-suffix {
        position: absolute;
        top: 50%;
        z-index: 2;
        display: flex;
        align-items: center;
        color: white;
        line-height: 0;
        transform: translateY(-50%);
        left: 50%;
      }
  }
}
</style>
